<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>用户管理界面</title>
        <!-- 引入bootstarap 的css样式 -->
        <link rel="stylesheet" href="bootvue/css/bootstrap.css">
        <!-- 需要放在的调用的前面 -->
        <!-- 引入vuejs-->
        <script src="bootvue/js/vue.min.js"></script>
        <!-- 引入axios-->
        <script src="bootvue/js/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 导航 -->
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">用户管理系统</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">欢迎:XXX</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- 中心布局 -->
            <div class="container-fluid">
                <!-- 搜索框-->
                <div class="row">
                    <div class="col-md-8" style="margin-left: 15px">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="seName">姓名：</label>
                                <!-- input之中的值和searchName绑定 -->
                                <input type="text" class="form-control" id="seName" v-model="searchName">
                            </div>
                            <div class="form-group">
                                <label for="sePhoneCode">电话号码：</label>
                                <input type="text" class="form-control" id="sePhoneCode" v-model="searchPhoneCode">
                            </div>
                            <!-- 阻止了默认行为 -->
                            <button type="button" class="btn btn-info" v-on:click.pre="searchUser">搜索</button>
                            <button type="reset" class="btn btn-warning">搜索条件重置</button>
                        </form>
                    </div>
                </div>

                <div class="col-md-8" style="margin-top: 20px">
                    <!-- 用户信息展示 -->
                    <table class="table table-striped table-bordered table-hover">
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>工资</th>
                            <th>电话号码</th>
                            <th>操作</th>
                        </tr>
                        <tbody>
                        <tr v-for="person in users" :key="person.id">
                            <th>{{person.id}}</th>
                            <th>{{person.name}}</th>
                            <th>{{person.age}}</th>
                            <th>{{person.salary}}</th>
                            <th>{{person.phoneCode}}</th>
                            <th>
                                <button class="btn btn-danger" @click="deleteByUserId(person.id)">删除</button>&nbsp;&nbsp;
                                <button class="btn btn-primary" v-on:click="updateByUserId(person.id)">修改</button>
                            </th>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="col-md-4" style="margin-top: 20px">
                    <form>
                        <div class="form-group">
                            <label for="name">姓名：</label>
                            <input type="text" class="form-control" id="name" v-model="saveuser.name"
                                   placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="age">年龄：</label>
                            <input type="text" class="form-control" id="age" v-model="saveuser.age"
                                   placeholder="请输入年龄">
                        </div>
                        <div class="form-group">
                            <label for="salary">工资：</label>
                            <input type="text" class="form-control" id="salary" v-model="saveuser.salary"
                                   placeholder="请输入工资">
                        </div>
                        <div class="form-group">
                            <label for="phoneCode">电话号码：</label>
                            <input type="text" class="form-control" id="phoneCode" v-model="saveuser.phoneCode"
                                   placeholder="请输入电话号码">
                        </div>
                        <button type="button" class="btn btn-info" v-on:click="saveUserInfo(saveuser.id)">提交保存
                        </button>&nbsp;&nbsp;
                        <button type="reset" class="btn btn-danger" @click="resetUserInfo">重置</button>
                    </form>
                </div>
            </div>
        </div>

        <script>
            Vue.config.devtools = true
            var vm = new Vue({
                el: "#app",
                data: {
                    // users的数据，来源于服务端接口，在页面加载完之后，users必须有数据，在加载完成之后，必须加载完成
                    users: [
                        // 是否给key加双引号，貌似问题不太大
                        {"id": "1", "name": "张三", "age": 22, "salary": '3200', "phoneCode": '17788991234'},
                        {id: "2", name: "李四", age: 23, salary: '3200', phoneCode: '15988991233'},
                        {id: "3", name: "王五", age: 35, salary: '3200', phoneCode: '1773291234'},
                        {id: "4", name: "小泽玛利亚", age: 32, salary: 13200, phoneCode: '14588991234'},
                        {id: "5", name: "天海翼", age: 29, salary: 15200, phoneCode: '17788565234'},
                        {id: "7", name: "北条麻妃", age: 31, salary: 22200, phoneCode: '17334491234'}
                    ],
                    // 用于数据双向绑定
                    saveuser: {},
                    // 搜索使用, 双向绑定
                    searchName: "",
                    searchPhoneCode: ""
                },
                methods: {
                    saveUserInfo(id) {
                        // 外部的this, 主要是和axios内部的做区别，一般习惯用_this来表示
                        let _this = this;
                        // 新创建则没有id
                        if (undefined == id) {
                            // 保存数据, 传递参数
                            axios.post('http://localhost:8988/bootvue/user/saveuser', _this.saveuser).then(function (resp) {
                                if (resp.data.success) {
                                    // 刷新
                                    _this.findAll();
                                    // 提交后置空
                                    _this.saveuser = {}
                                } else {
                                    console.log(resp.data.success);
                                }
                            }).catch(function (err) {
                                console.log(err)
                            })
                        } else {
                            // 保存数据, 传递参数
                            axios.post('http://localhost:8988/bootvue/user/updateuserbyid', _this.saveuser).then(function (resp) {
                                if (resp.data.success) {
                                    // 刷新
                                    _this.findAll();
                                    // 提交后置空
                                    _this.saveuser = {}
                                } else {
                                    console.log(resp.data.success);
                                }
                            }).catch(function (err) {
                                console.log(err)
                            })
                        }
                    },
                    resetUserInfo() {
                        this.saveuser = {};
                    },
                    // 删除用户id
                    deleteByUserId(id) {
                        // console.log(id)
                        let _this = this;
                        if (window.confirm('确认要删除id为 ' + id + " 的用户吗？")) {
                            axios.get('http://localhost:8988/bootvue/user/deleteuserbyid?id=' + id).then(function (resp) {
                                // console.log(resp.data)
                                // 此处可以进行提示
                                if (resp.data.success) {
                                    _this.findAll()
                                    alert(resp.data.message)
                                }
                            }).catch(function (err) {
                                console.log(err)
                            })
                        }
                    },
                    // 更新用户
                    updateByUserId(id) {
                        console.log(id)
                        let _this = this;
                        axios.get('http://localhost:8988/bootvue/user/selectuserbyid?id=' + id).then(function (resp) {
                            console.log(resp.data)
                            _this.saveuser = resp.data;
                        }).catch(function (err) {
                            console.log(err)
                        })
                    },
                    findAll() {
                        let _this = this;
                        axios.get('http://localhost:8988/bootvue/user/findall').then(function (resp) {
                            _this.users = resp.data;
                            // 调试使用
                            // console.log(resp.data)
                        }).catch(function (err) {
                            console.log(err)
                        })
                    },
                    searchUser() {
                        console.log(this.searchName)
                        console.log(this.searchPhoneCode)
                        let _this = this
                        axios.get('http://localhost:8988/bootvue/user/selectuserbynameorphonecode?name=' +
                            _this.searchName + "&phoneCode=" + _this.searchPhoneCode).then(function (resp) {
                            _this.users = resp.data;
                        }).catch(function (err) {
                            console.log(err)
                        })
                    }
                },
                computed: {},
                // 其他的钩子函数
                created() {
                    this.findAll();
                }
            });
        </script>
    </body>
</html>